<!-- 系统能效-子系统对应的数据展示 -->
<template>
  <div class="system-efficiency-wrap">
    <div class="top-wrap">
      <px-radio-group v-model="radioVal" @change="handleRadioChange">
        <px-radio-button label="system">能效计量</px-radio-button>
        <px-radio-button label="parameter">能效参数</px-radio-button>
        <px-radio-button label="load">系统负荷</px-radio-button>
      </px-radio-group>
    </div>
    <div v-loading="loading" class="content-wrap">
      <template v-if="radioVal === 'system'">
        <div class="system-wrap">
          <px-row :gutter="16" class="system-wrap-top">
            <px-col :span="9">
              <div class="black">
                <div class="data-wrap">
                  <div class="data-left">
                    <img class="left-img" src="@/assets/images/energy/lightOverView/ng_cost.png" />
                  </div>
                  <div class="data-right">
                    <div class="item">
                      <div class="item-top-wrap">
                        <div class="text">{{ systemDataObj?.outputName }}</div>
                      </div>
                      <div class="num-wrap">
                        <px-tooltip v-if="outPutShow" effect="dark" :content="String(systemDataObj?.output)" placement="top">
                          <div ref="outPutRef" class="num">{{ systemDataObj?.output }}</div>
                        </px-tooltip>
                        <div v-else ref="outPutRef" class="num">{{ systemDataObj?.output }}</div>
                        <div class="unit">{{ systemDataObj?.outputUnit }}</div>
                      </div>
                    </div>
                    <div class="item">
                      <div class="item-top-wrap">
                        <div class="text">同期</div>
                        <div :class="[systemDataObj?.outputYoy > 0 ? 'up' : 'down', systemDataObj?.outputYoy === '-' ? 'foo' : '']">
                          {{ systemDataObj?.outputYoyText }}
                        </div>
                      </div>
                      <div class="num-wrap">
                        <px-tooltip v-if="outputYoyValueShow" effect="dark" :content="String(systemDataObj?.outputYoyValue)" placement="top">
                          <div ref="outputYoyValueRef" class="num">{{ systemDataObj?.outputYoyValue }}</div>
                        </px-tooltip>
                        <div v-else ref="outputYoyValueRef" class="num">{{ systemDataObj?.outputYoyValue }}</div>
                        <div class="unit">{{ systemDataObj?.outputUnit }}</div>
                      </div>
                    </div>
                    <div class="item">
                      <div class="item-top-wrap">
                        <div class="text">上期</div>
                        <div :class="[systemDataObj?.outputMom > 0 ? 'up' : 'down', systemDataObj?.outputMom === '-' ? 'foo' : '']">
                          {{ systemDataObj?.outputMomText }}
                        </div>
                      </div>
                      <div class="num-wrap">
                        <px-tooltip v-if="outputMomValueShow" effect="dark" :content="String(systemDataObj?.outputMomValue)" placement="top">
                          <div ref="outputMomValueRef" class="num">{{ systemDataObj?.outputMomValue }}</div>
                        </px-tooltip>
                        <div v-else ref="outputMomValueRef" class="num">{{ systemDataObj?.outputMomValue }}</div>
                        <div class="unit">{{ systemDataObj?.outputUnit }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="title-wrap">
                  <btnImageAndData
                    v-has="'ALL_ENERGY_SYSTEM_ENERGY_EFFICIENCY_DOWNLOAD'"
                    class="btn-top"
                    :exportImage="Boolean(false)"
                    @exportChange="val => handlerExport(val, 'table', 'summary', '')"
                  />
                  <!-- <px-button v-has="'ALL_ENERGY_SYSTEM_ENERGY_EFFICIENCY_DOWNLOAD'" class="btn-download" @click="handlerExport('table', 'summary')"
                  >导出</px-button
                > -->
                  <modelTitle :title="'总产出与能耗'" />
                </div>
                <px-table
                  v-if="systemDataObj.summaryTable?.length"
                  max-height="184"
                  class="table-wrap"
                  :data="systemDataObj.summaryTable"
                  size="small"
                  border
                  stripe
                  show-overflow-tooltip
                >
                  <template v-for="item in tableHeader" :key="item.prop">
                    <px-table-column :prop="item.prop" :label="item.label">
                      <template v-if="['yoyText', 'momText'].includes(item.prop)" #default="scope">
                        <span :class="[scope.row[item.flag] > 0 ? 'up' : 'down', scope.row[item.flag] === '-' ? 'foo' : '']">{{
                          formatValue(scope.row[item.prop])
                        }}</span>
                      </template>
                      <template v-else #default="scope">
                        {{ formatValue(scope.row[item.prop]) }}
                      </template>
                    </px-table-column>
                  </template>
                </px-table>
                <px-empty v-else :image-size="50" />
              </div>
            </px-col>
            <px-col :span="15">
              <div class="black black-8">
                <modelTitle :title="'总能耗趋势图'" />
                <btnImageAndData
                  v-has="'ALL_ENERGY_SYSTEM_ENERGY_EFFICIENCY_DOWNLOAD'"
                  class="btn-download"
                  :exportData="Boolean(false)"
                  @exportChange="val => handlerExport(val, '', '', 'systemSummaryLineRef')"
                />
                <div v-if="systemDataObj?.summaryTrend" ref="systemSummaryLineRef" class="chart-wrap" />
                <px-empty v-else :image-size="50" />
              </div>
            </px-col>
          </px-row>
          <px-row :gutter="16" class="system-wrap-btm">
            <px-col :span="9">
              <div class="black">
                <modelTitle :title="'单位产量能耗'" />
                <btnImageAndData
                  v-has="'ALL_ENERGY_SYSTEM_ENERGY_EFFICIENCY_DOWNLOAD'"
                  class="btn-download"
                  :exportImage="Boolean(false)"
                  @exportChange="val => handlerExport(val, 'table', 'unit', '')"
                />
                <!-- <px-button v-has="'ALL_ENERGY_SYSTEM_ENERGY_EFFICIENCY_DOWNLOAD'" class="btn-download" @click="handlerExport('table', 'unit')"
                  >导出</px-button
                > -->
                <px-table
                  v-if="systemDataObj.unitTable?.length"
                  max-height="184"
                  class="table-wrap"
                  :data="systemDataObj.unitTable"
                  size="small"
                  border
                  stripe
                  show-overflow-tooltip
                >
                  <template v-for="item in tableHeader" :key="item.prop">
                    <px-table-column :prop="item.prop" :label="item.label">
                      <!-- 同比和环比颜色处理 -->
                      <template v-if="['yoyText', 'momText'].includes(item.prop)" #default="scope">
                        <span :class="[scope.row[item.flag] > 0 ? 'up' : 'down', scope.row[item.flag] === '-' ? 'foo' : '']">{{
                          scope.row[item.prop] ?? "-"
                        }}</span>
                      </template>
                      <template v-else #default="scope">
                        {{ scope.row[item.prop] ?? "-" }}
                      </template>
                    </px-table-column>
                  </template>
                </px-table>
                <px-empty v-else :image-size="50" />
              </div>
            </px-col>
            <px-col :span="15">
              <div class="black black-8">
                <modelTitle :title="'单耗趋势图'" />
                <btnImageAndData
                  v-has="'ALL_ENERGY_SYSTEM_ENERGY_EFFICIENCY_DOWNLOAD'"
                  class="btn-download"
                  :exportData="Boolean(false)"
                  @exportChange="val => handlerExport(val, '', '', 'systemUnitLineRef')"
                />
                <div v-if="systemDataObj?.unitTrend" ref="systemUnitLineRef" class="chart-wrap" />
                <px-empty v-else :image-size="50" />
              </div>
            </px-col>
          </px-row>
        </div>
      </template>
      <template v-if="radioVal === 'parameter'">
        <div class="parameter-wrap">
          <!-- <div class="select-wrap">
            <px-select
              v-model="parameterSelectedVal"
              multiple
              placeholder="相关指标"
              style="width: 480px"
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="2"
              filterable
              clearable
              @change="parameterSelectChange"
            >
              <px-option v-for="(item, index) in parameterSelectedList" :key="index" :label="item.indicatorName" :value="item.jobId" />
            </px-select>
          </div> -->
          <div v-if="parameterObj" ref="parameterLineRef" class="chart-wrap" />
          <px-empty v-else :image-size="120" />
        </div>
      </template>
      <template v-if="radioVal === 'load'">
        <div class="load-wrap">
          <px-row :gutter="16">
            <px-col :span="12">
              <div class="black-12">
                <modelTitle :title="'负荷列表'" />
                <px-table
                  v-if="loadDataObj?.table?.length"
                  :data="loadDataObj?.table"
                  size="small"
                  border
                  stripe
                  show-overflow-tooltip
                  class="table-wrap"
                >
                  <template v-for="item in loadTableHeader" :key="item.prop">
                    <px-table-column :prop="item.prop" :label="item.label">
                      <template #default="scope">
                        {{ formatValue(scope.row[item.prop]) }}
                      </template>
                    </px-table-column>
                  </template>
                </px-table>
                <px-empty v-else class="table-wrap" :image-size="50" />
              </div>
            </px-col>
            <px-col :span="12">
              <div class="left-wrap">
                <div class="left-top">
                  <modelTitle :title="'负荷率'" />
                  <div v-if="loadDataObj" ref="loadLineRef" class="chart-wrap" />
                  <px-empty v-else :image-size="50" />
                </div>
                <div class="left-btm">
                  <modelTitle :title="'负荷热力图'" />
                  <div v-if="loadDataObj" class="max-out-put">
                    <div>系统最大产出量</div>
                    <div class="num">{{ loadDataObj?.maxOutput || "-" }}{{ loadDataObj?.ratedUnit }}</div>
                  </div>
                  <div v-if="loadDataObj" ref="loadHeatMapRef" class="chart-wrap" />
                  <px-empty v-else :image-size="50" />
                </div>
              </div>
            </px-col>
          </px-row>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onUpdated, computed, getCurrentInstance } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import btnImageAndData from "@/views/common/energy/components/btnImageAndData/index.vue";
import * as echarts from "echarts";
import {
  getViewConsumptionMeasurementSystemApi,
  getViewConsumptionMeasurementParameterApi,
  getViewConsumptionMeasurementLoadApi
} from "@/api/energy/energyConsumption";

const { proxy } = getCurrentInstance();

const props = defineProps({
  queryParams: {
    type: Object,
    default: () => {}
  },
  currentNode: {
    type: String,
    default: ""
  }
});

const state = reactive({
  radioVal: "system",
  tableHeader: [
    {
      label: "消耗能源",
      prop: "name",
      flag: "name",
      align: "left"
    },
    {
      label: "耗能总量",
      prop: "sum",
      flag: "sum",
      align: "left"
    },
    {
      label: "同比",
      prop: "yoyText",
      flag: "yoy",
      align: "left"
    },
    {
      label: "环比",
      prop: "momText",
      flag: "mom",
      align: "left"
    },
    {
      label: "折标占比",
      prop: "ratioText",
      flag: "ratio",
      align: "left"
    }
  ],
  loading: false,
  systemDataObj: {
    dimension: "",
    startDate: "",
    endDate: "",
    systemName: "", //子系统名称
    outputName: "", //	总产出名称
    outputUnit: "", //总产出单位
    output: "", //总产出量
    outputYoyValue: "", //总产出量 同期
    outputYoy: "", //	总产出量 同比
    outputMomValue: "", //总产出量 上期
    outputMom: "", //总产出量 环比
    summaryTable: [], //总产出与能耗表格
    unitTable: [], //单位产量能耗表格
    summaryTrend: {
      xaxis: [],
      yaxis: []
    }, // 总产出与能耗年度配额消耗趋势
    unitTrend: {
      xaxis: [],
      yaxis: []
    } // 单位产量能耗年度配额消耗趋势
  },
  systemDataObjCopy: {},
  loadTableHeader: [
    {
      label: "日期",
      prop: "date",
      flag: "date",
      align: "left"
    },
    {
      label: "负荷量",
      prop: "qty",
      flag: "qty",
      align: "left"
    },
    {
      label: "负荷百分比",
      prop: "pct",
      flag: "pct",
      align: "left"
    }
  ],
  loadDataObj: {
    xyData: "", //热力图纵数据
    unit: "", // 产出量单位
    maxOutput: "", //	最大产出量
    rated: "", //额定产出量
    table: [],
    //年度配额消耗趋势
    trend: {
      xaxis: [],
      yaxis: []
    }
  },
  parameterObj: {},
  parameterSelectedVal: [],
  parameterSelectedList: []
});
const outPutRef = ref();
const outPutShow = ref(false);
const outputYoyValueRef = ref();
const outputYoyValueShow = ref(false);
const outputMomValueRef = ref();
const outputMomValueShow = ref(false);
const systemSummaryLineRef = ref();
const systemUnitLineRef = ref();
const parameterLineRef = ref();
const loadLineRef = ref();
const loadHeatMapRef = ref();
const queryParams = computed(() => props.queryParams);
const currentNode = computed(() => props.currentNode);
const { radioVal, tableHeader, loading, systemDataObj, loadTableHeader, loadDataObj, parameterObj, parameterSelectedVal, parameterSelectedList } =
  toRefs(state);

onMounted(() => {
  getSystemData();
  // getParameterData();
  // getLoadData();
});

onUpdated(() => {
  checkOverflow();
});
let chartObj = {};
const handlerExport = (val1, val2, val3, val4) => {
  console.log(val1, val2, val3, val4);
  if (val1 === "data") {
    if (val2 === "table") {
      let params = state.systemDataObjCopy;
      params.type = "table";
      params.summaryUnit = val3;
      let obj = {
        summary: "总产出",
        unit: "单位产量"
      };
      proxy.download("post", "/energy/consumeMeasure/exportConsumptionMeasurementSystem", params, `系统能效-${obj[val2]}.xlsx`);
    }
  } else {
    let myChart = chartObj[val4];
    if (!myChart) return;
    // 获取Base64图片数据
    const imgUrl = myChart.getDataURL({
      type: "png",
      pixelRatio: 2,
      backgroundColor: "#fff"
    });
    // 创建并触发下载链接
    const link = document.createElement("a");
    link.href = imgUrl;
    link.download = "chart.png";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
};

// 检查文本是否溢出
const checkOverflow = () => {
  if (outPutRef.value) {
    outPutShow.value = outPutRef.value.scrollWidth > outPutRef.value.clientWidth;
  }
  if (outputYoyValueRef.value) {
    outputYoyValueShow.value = outputYoyValueRef.value.scrollWidth > outputYoyValueRef.value.clientWidth;
  }
  if (outputMomValueRef.value) {
    outputMomValueShow.value = outputMomValueRef.value.scrollWidth > outputMomValueRef.value.clientWidth;
  }
};

const formatValue = val => {
  if (val) return val;
  if (val === 0) return 0;
  return "-";
};

// 获取参数
const getParams = () => {
  let obj = {
    Daily: "DAY",
    Monthly: "MONTH",
    Yearly: "YEAR"
  };
  let { startTime, endTime } = queryParams.value;
  let dimension = obj[queryParams.value?.queryTimeGranularity] || "";
  let sysId = currentNode.value || "";
  return {
    startTime,
    endTime,
    dimension,
    sysId
  };
};

// 能效计量
const getSystemData = async () => {
  try {
    state.loading = true;
    const { startTime, endTime, dimension, sysId } = getParams();
    const params = {
      factoryId: "",
      facCode: "",
      dimension: dimension,
      startDate: startTime,
      endDate: endTime,
      sysId: sysId,
      unit: ""
    };
    const res = await getViewConsumptionMeasurementSystemApi(params);
    state.systemDataObjCopy = JSON.parse(JSON.stringify(res));
    res?.summaryTable?.forEach(i => {
      i.sum = i.qty + i.unit;
      if (i.yoy !== null) {
        i.yoyText = i.yoy > 0 ? "+" + i.yoy + "%" : i.yoy + "%";
      } else {
        i.yoyText = "-";
        i.yoy = "-";
      }
      if (i.mom !== null) {
        i.momText = i.mom > 0 ? "+" + i.mom + "%" : i.mom + "%";
      } else {
        i.momText = "-";
        i.mom = "-";
      }
      if (i.ratio !== null) {
        i.ratioText = i.ratio + "%";
      } else {
        i.ratioText = "-";
        i.ratio = "-";
      }
    });
    res?.unitTable?.forEach(i => {
      i.sum = i.qty + i.unit;
      if (i.yoy !== null) {
        i.yoyText = i.yoy > 0 ? "+" + i.yoy + "%" : i.yoy + "%";
      } else {
        i.yoyText = "-";
        i.yoy = "-";
      }
      if (i.mom !== null) {
        i.momText = i.mom > 0 ? "+" + i.mom + "%" : i.mom + "%";
      } else {
        i.momText = "-";
        i.mom = "-";
      }
      if (i.ratio !== null) {
        i.ratioText = i.ratio + "%";
      } else {
        i.ratioText = "-";
        i.ratio = "-";
      }
    });
    res.output = res?.output !== null ? String(res?.output) : "-";
    if (res?.outputMom !== null) {
      res.outputMomText = res?.outputMom > 0 ? "+" + res?.outputMom + "%" : res?.outputMom + "%";
    } else {
      res.outputMomText = "-";
      res.outputMom = "-";
    }
    res.outputMomValue = res?.outputMomValue !== null ? String(res?.outputMomValue) : "-";
    if (res?.outputYoy !== null) {
      res.outputYoyText = res?.outputYoy > 0 ? "+" + res?.outputYoy + "%" : res?.outputYoy + "%";
    } else {
      res.outputYoyText = "-";
      res.outputYoy = "-";
    }
    res.outputYoyValue = res?.outputYoyValue !== null ? String(res?.outputYoyValue) : "-";
    checkOverflow();
    state.systemDataObj = res;
    res?.summaryTrend ? drawBarLineChart(systemSummaryLineRef.value, res?.summaryTrend, "systemSummaryLineRef") : "";
    res?.unitTrend ? drawBarLineChart(systemUnitLineRef.value, res?.unitTrend, "systemUnitLineRef") : "";
  } catch (error) {
  } finally {
    state.loading = false;
  }
};
// 能效计量-折线图
const drawBarLineChart = (dom, obj, args) => {
  const colors = ["#FD7C7C", "#3B82F6", "#13C2C2", "#FFC53D", "#FD7C7C", "#3B82F6", "#13C2C2", "#FFC53D"];
  let yAxisAry = [];
  let seenUnits = new Map(); // 用来进行去重
  let seriesData = [];
  obj?.yaxis?.forEach((i, idx) => {
    if (i.name === "产出量") {
      seriesData.push({
        name: i.name,
        type: "line",
        yAxisIndex: idx,
        data: i.value,
        unit: i.unit,
        tooltip: {
          valueFormatter: function (value) {
            if (value === null || value === undefined) {
              value = "-";
            }
            return value + " " + i.unit;
          }
        }
      });
    } else {
      seriesData.push({
        name: i.name,
        type: "bar",
        yAxisIndex: idx,
        data: i.value,
        unit: i.unit,
        tooltip: {
          valueFormatter: function (value) {
            if (value === null || value === undefined) {
              value = "-";
            }
            return value + " " + i.unit;
          }
        }
      });
    }
    if (!seenUnits.has(i.unit)) {
      seenUnits.set(i.unit, true);
    }
  });
  [...seenUnits]?.forEach(([key, value], idx) => {
    yAxisAry.push({
      type: "value",
      name: key,
      alignTicks: true,
      axisLabel: {
        formatter: function (value) {
          if (value >= 1e12) {
            return (value / 1e12).toFixed(1) + "T"; // 万亿
          } else if (value >= 1e9) {
            return (value / 1e9).toFixed(1) + "B"; // 十亿
          } else if (value >= 1e6) {
            return (value / 1e6).toFixed(1) + "M"; // 百万
          } else if (value >= 1e3) {
            return (value / 1e3).toFixed(1) + "K"; // 千
          }
          return value;
        }
      },
      position: idx === 0 ? "left" : "right",
      offset: idx === 0 ? 0 : (idx - 1) * 60,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[idx]
        }
      }
    });
  });
  seriesData?.forEach(i => {
    const idx = yAxisAry?.findIndex(j => j.name === i.unit);
    i.yAxisIndex = idx;
  });

  let options = {
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    grid: {
      right: `${yAxisAry.length > 1 ? (yAxisAry.length - 1) * 5 : 10}%`,
      bottom: "10%"
    },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     saveAsImage: {
    //       title: "点击保存为图片"
    //     }
    //   }
    // },
    legend: {
      type: "scroll"
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        data: obj?.xaxis || []
      }
    ],
    yAxis: yAxisAry,
    series: seriesData
  };
  let myChart = echarts.init(dom);
  chartObj[args] = myChart;
  myChart.clear();
  myChart.setOption(options);
};

// 能效参数
const getParameterData = async () => {
  try {
    state.loading = true;
    const { startTime, endTime, dimension, sysId } = getParams();
    const params = {
      factoryId: "",
      facCode: "",
      dimension: dimension,
      startDate: startTime,
      endDate: endTime,
      sysId: sysId,
      unit: ""
    };
    const res = await getViewConsumptionMeasurementParameterApi(params);
    state.parameterObj = res;
    res ? drawLineChart(parameterLineRef.value, res) : "";
  } catch (error) {
  } finally {
    state.loading = false;
  }
};
// 能效参数-折线图
const drawLineChart = (dom, obj) => {
  let seriesData = obj?.yaxis?.map(i => {
    return {
      name: i.name,
      type: "line",
      stack: "Total",
      data: i.value
    };
  });

  let options = {
    tooltip: {
      trigger: "axis",
      confine: true,
      enterable: true,
      extraCssText: "max-height:80%;overflow:auto",
      position: function (point, params, dom, rect, size) {
        return [point[0], point[1]];
      }
    },
    legend: {},
    grid: {
      left: "4%",
      right: "4%",
      bottom: "10%",
      top: "20%"
    },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     saveAsImage: {
    //       title: "点击保存为图片"
    //     }
    //   }
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: obj?.xaxis
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: function (value) {
          if (value >= 1e12) {
            return (value / 1e12).toFixed(1) + "T"; // 万亿
          } else if (value >= 1e9) {
            return (value / 1e9).toFixed(1) + "B"; // 十亿
          } else if (value >= 1e6) {
            return (value / 1e6).toFixed(1) + "M"; // 百万
          } else if (value >= 1e3) {
            return (value / 1e3).toFixed(1) + "K"; // 千
          }
          return value;
        }
      }
    },
    series: seriesData
  };
  let myChart = echarts.init(dom);
  myChart.clear();
  myChart.setOption(options);
};
// 能效参数--下拉框
const parameterSelectChange = val => {
  console.log("val", val);
};
// 能效参数-下拉框数据源
const getParameterSelectData = () => {};

// 系统负荷
const getLoadData = async () => {
  try {
    state.loading = true;
    const { startTime, endTime, dimension, sysId } = getParams();
    const params = {
      factoryId: "",
      facCode: "",
      dimension: dimension,
      startDate: startTime,
      endDate: endTime,
      sysId: sysId,
      // sysId: "SC734EA3",
      unit: ""
    };
    const res = await getViewConsumptionMeasurementLoadApi(params);
    state.loadDataObj = res;
    res?.trend?.yaxis?.length ? drawLoadLineChart(loadLineRef.value, res?.trend) : "";
    res ? drawLoadHeatMapChart(loadHeatMapRef.value, res) : "";
  } catch (error) {
  } finally {
    state.loading = false;
  }
};
// 系统负荷-折线图
const drawLoadLineChart = (dom, obj) => {
  let options = {
    // toolbox: {
    //   show: true,
    //   feature: {
    //     saveAsImage: {
    //       title: "点击保存为图片"
    //     }
    //   }
    // },
    tooltip: {
      trigger: "axis"
    },
    grid: {
      bottom: "10%"
    },
    xAxis: {
      type: "category",
      data: obj?.xaxis || []
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: function (value) {
          if (value >= 1e12) {
            return (value / 1e12).toFixed(1) + "T"; // 万亿
          } else if (value >= 1e9) {
            return (value / 1e9).toFixed(1) + "B"; // 十亿
          } else if (value >= 1e6) {
            return (value / 1e6).toFixed(1) + "M"; // 百万
          } else if (value >= 1e3) {
            return (value / 1e3).toFixed(1) + "K"; // 千
          }
          return value;
        }
      }
    },
    series: [
      {
        data: obj?.yaxis?.[0]?.value || [],
        type: "line",
        smooth: true
      }
    ]
  };
  let myChart = echarts.init(dom);
  chartObj.loadLineRef = myChart;
  myChart.clear();
  myChart.setOption(options);
};
// 系统负荷-热力图
const drawLoadHeatMapChart = (dom, obj) => {
  let loadRateAry = [];
  let xyData = [];
  obj?.xyData?.forEach(innerArray => {
    const [first, second, third] = innerArray;
    const parts = third.split("#");
    const newArray = [Number(first), Number(second), Number(parts[0])];
    xyData.push(newArray);
    if (parts.length > 1) {
      loadRateAry.push(Number(parts[1]));
    }
  });
  let options = {
    tooltip: {
      formatter: function (params) {
        const value = params.value[2];
        return `时间: ${params.name}<br>产出量: ${value}${obj?.unit}<br>负荷率: ${loadRateAry[params?.dataIndex]}%`;
      }
    },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     saveAsImage: {
    //       title: "点击保存为图片"
    //     }
    //   }
    // },
    grid: {
      bottom: "10%"
    },
    xAxis: {
      type: "category",
      data: obj?.xaxis || []
    },
    yAxis: {
      type: "category",
      data: obj?.yaxis || []
    },
    visualMap: {
      min: 0,
      max: 1,
      calculable: true,
      realtime: false,
      right: "10",
      bottom: "10",
      inRange: {
        color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
      }
    },
    series: [
      {
        name: "Gaussian",
        type: "heatmap",
        data: xyData,
        // data: data,
        emphasis: {
          itemStyle: {
            borderColor: "#333",
            borderWidth: 1
          }
        },
        progressive: 1000,
        animation: false
      }
    ]
  };
  let myChart = echarts.init(dom);
  chartObj.loadHeatMapRef = myChart;
  myChart.clear();
  myChart.setOption(options);
};
// radio切换
const handleRadioChange = val => {
  if (val === "system") {
    getSystemData();
  }
  if (val === "parameter") {
    getParameterData();
  }
  if (val === "load") {
    getLoadData();
  }
};
</script>
<style lang="scss" scoped>
.system-efficiency-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.content-wrap {
  flex: 1;
}

.system-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;

  .system-wrap-top {
    flex: 1;
  }

  .system-wrap-btm {
    flex: 1;
    margin-top: 16px;
  }

  .data-wrap {
    display: flex;
    margin-bottom: 10px;
    color: #000;

    .data-left {
      display: flex;
      min-width: 48px;
      margin-right: 10px;

      .left-img {
        width: 48px;
        height: 48px;
      }
    }

    .unit {
      margin: 0 5px;
      font-size: 14px;
    }

    .data-right {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      align-items: center;

      .item {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        margin-right: 10px;

        .item-top-wrap {
          display: flex;
          align-items: baseline;
        }

        .text {
          margin-right: 10px;
          font-size: 12px;
          font-weight: 400;
        }

        .num-wrap {
          display: flex;
          align-items: baseline;
        }

        .num {
          max-width: 100px;
          overflow: hidden;
          font-size: 20px;
          font-weight: 500;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .down {
          font-size: 14px;
          color: #34d399;
        }

        .foo {
          color: rgb(0 0 0 / 80%);
        }

        .up {
          font-size: 14px;
          color: #f00;
        }
      }
    }
  }

  .title-wrap {
    position: relative;
  }

  .btn-top {
    position: absolute;
    top: 0;
    right: 0;
  }

  .btn-download {
    position: absolute;
    top: 16px;
    right: 24px;
  }
}

.black {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.chart-wrap {
  flex: 1;
}

.table-wrap {
  margin-top: 16px;

  .down {
    color: #34d399;
  }

  .foo {
    color: rgb(0 0 0 / 80%);
  }

  .up {
    color: #f00;
  }
}

.parameter-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 24px;
  background: #fff;
  border-radius: 4px;

  .chart-wrap {
    // height: 100%;
    flex: 1;
  }

  .select-wrap {
    text-align: right;
  }
}

.load-wrap {
  .black-12 {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;

    .table-wrap {
      height: calc(100vh - 346px);
      margin-top: 16px;
    }
  }

  .left-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 266px);
  }

  .left-top {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 24px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 4px;
  }

  .left-btm {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;

    .max-out-put {
      display: flex;
      justify-content: center;
      margin-top: 5px;

      .num {
        margin-left: 5px;
      }
    }
  }
}
</style>
